<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        :root{
            --button-height:32px;
            --font-size:14px;
            --button-bg:#fff;
            --button-active-bg:#eee;
            --button-radius:4px;
            --color:#333;
            --border-color:#999;
            --border-color-hover:#666;
        }
        .box{
            margin: 20px;
            
        }
        .row{
            margin-bottom: 20px;
        }
        .box1{
            background: #99a9bf;
            border-radius: 4px;
            height: 100%;
            min-height: 36px;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
        }
        .box2{
            background: #d3dce6;
            border-radius: 4px;
            height: 100%;
            min-height: 36px;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
        }
        .box3{
            background: #e5e9f2;
            border-radius: 4px;
            min-height: 36px;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>Button 组件</h1>
        <hr>
        <br/>
        <lm-button>默认按钮</lm-button>
        <lm-button type="dashed">dashed</lm-button>
        <lm-button type="primary" :animation="false">primary</lm-button>
        <lm-button type="success">success</lm-button>
        <lm-button type="info">info</lm-button>
        <lm-button type="warning">warning</lm-button>
        <lm-button type="danger">danger</lm-button>
        <br/>
        <br/>
        <lm-button plain>朴素按钮</lm-button>
        <lm-button type="primary" plain>primary</lm-button>
        <lm-button type="success" plain>success</lm-button>
        <lm-button type="info" plain>info</lm-button>
        <lm-button type="warning" plain>warning</lm-button>
        <lm-button type="danger" plain>danger</lm-button>
        <br/>
        <br/>
        <lm-button round>圆角按钮</lm-button>
        <lm-button type="dashed" round>dashed</lm-button>
        <lm-button type="primary" round>primary</lm-button>
        <lm-button type="success" round>success</lm-button>
        <lm-button type="info" round>info</lm-button>
        <lm-button type="warning" round>warning</lm-button>
        <lm-button type="danger" round>danger</lm-button>
        <br/>
        <br/>
        <lm-button icon="reload" @click="buttonClick"  circle></lm-button>
        <lm-button type="dashed" icon="reload" @click="buttonClick"  circle></lm-button>
        <lm-button type="primary" icon="reload" @click="buttonClick"  circle></lm-button>
        <lm-button type="success" icon="reload" @click="buttonClick"  circle></lm-button>
        <lm-button type="info" icon="reload" @click="buttonClick"  circle></lm-button>
        <lm-button type="warning" icon="reload" @click="buttonClick"  circle></lm-button>
        <lm-button type="danger" icon="reload" @click="buttonClick"  circle></lm-button>
        <br/>
        <br/>
        <lm-button disabled>禁用默认按钮</lm-button>
        <lm-button type="dashed" disabled>dashed</lm-button>
        <lm-button type="primary" disabled>primary</lm-button>
        <lm-button type="success" disabled>success</lm-button>
        <lm-button type="info" disabled>info</lm-button>
        <lm-button type="warning" disabled>warning</lm-button>
        <lm-button type="danger" disabled>danger</lm-button>
        <br/>
        <br/>
        <lm-button plain disabled>禁用朴素按钮</lm-button>
        <lm-button type="primary" plain disabled>primary</lm-button>
        <lm-button type="success" plain disabled>success</lm-button>
        <lm-button type="info" plain disabled>info</lm-button>
        <lm-button type="warning" plain disabled>warning</lm-button>
        <lm-button type="danger" plain disabled>danger</lm-button>
        <br/>
        <br/>
        <lm-button>默认按钮</lm-button>
        <lm-button size="medium">中等</lm-button>
        <lm-button size="small">小型</lm-button>
        <lm-button size="mini">超小</lm-button>
        <br/>
        <br/>
        <lm-button round>默认按钮</lm-button>
        <lm-button size="medium" round>中等</lm-button>
        <lm-button size="small" round>小型</lm-button>
        <lm-button size="mini" round>超小</lm-button>
        <br/>
        <br/>
        <lm-group-button>
            <lm-button icon="left">按钮1</lm-button>
            <lm-button icon="reload">按钮2</lm-button>
        </lm-group-button>
        <br/>
        <br/>
        <h1>Input 组件</h1>
        <hr>
        <br/>
        <div class="box">
            <lm-input v-model="inputValue" style="width:180px" placeholder="请输入"></lm-input>
        </div>
        <div class="box">
            <lm-input v-model="inputValue" style="width:180px" placeholder="请输入" clearable></lm-input>
        </div>
        <div class="box">
            <lm-input v-model="inputValue" style="width:180px" disabled  placeholder="请输入"></lm-input>
        </div>
        <div class="box">
            <lm-input v-model="inputValue" style="width:180px" readonly  placeholder="请输入"></lm-input>
        </div>
        <div class="box">
            <lm-input v-model="inputValue" style="width:180px"   placeholder="请输入" :error="error"></lm-input>
            <lm-button @click="errorChange">触发错误</lm-button>
        </div>
        <h1>Row/Col 组件</h1>
        <hr>
        <br/>
        <div style="width:90%;margin:0 auto">
            <lm-row>
                <lm-col span="24">
                    <div class="box1"></div>
                </lm-col>
            </lm-row>
            <lm-row>
                <lm-col span="12">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="12">
                    <div class="box3"></div>
                </lm-col>
            </lm-row>
            <lm-row>
                <lm-col span="8">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="8">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="8">
                    <div class="box2"></div>
                </lm-col>
            </lm-row>
            <lm-row>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
            </lm-row>
            <lm-row>
                <lm-col span="4">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="4">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="4">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="4">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="4">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="4">
                    <div class="box3"></div>
                </lm-col>
            </lm-row>
            <br/>
            <br/>
            <lm-row gutter="20">
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
            </lm-row>
            <br/>
            <br/>
            <lm-row gutter="20">
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6" offset="6">
                    <div class="box3"></div>
                </lm-col>
            </lm-row>
            <lm-row gutter="20">
                <lm-col span="6" offset="6">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6" offset="6">
                    <div class="box3"></div>
                </lm-col>
            </lm-row>
            <lm-row gutter="20">
                <lm-col span="12" offset="6">
                    <div class="box3"></div>
                </lm-col>
            </lm-row>
            <br/>
            <br/>
            <lm-row justify='left'>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
            </lm-row>
            <lm-row justify='center'>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
            </lm-row>
            <lm-row justify='right'>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
            </lm-row>
            <lm-row justify='space-between'>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
            </lm-row>
            <lm-row justify='space-around'>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6">
                    <div class="box2"></div>
                </lm-col>
            </lm-row>
            <lm-row gutter='20'>
                <lm-col span="6" xs="24" sm="12" md='8' lg='6' xl='4'>
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6" xs="24" sm="12" md='8' lg='6' xl='4'>
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6" xs="24" sm="12" md='8' lg='6' xl='4'>
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6" xs="24" sm="12" md='8' lg='6' xl='4'>
                    <div class="box3"></div>
                </lm-col>
                <lm-col span="6" xs="24" sm="12" md='8' lg='6' xl='4'>
                    <div class="box2"></div>
                </lm-col>
                <lm-col span="6" xs="24" sm="12" md='8' lg='6' xl='4'>
                    <div class="box3"></div>
                </lm-col>
            </lm-row>
        </div>
        <br/>
        <h1> 布局组件</h1>
        <hr>
        <br/>
        <div style="width:90%;margin:0 auto">
            <lm-layout style="min-height: 600px;">
                <lm-header>
                    <div class="box1">header</div>
                </lm-header>
                <lm-content class="box2">
                    <div  style="height: 100%;">content</div>
                </lm-content>
                <lm-footer>
                    <div class="box1">footer</div>
                </lm-footer>
            </lm-layout>
        </div>
        <br/>
        <div style="width:90%;margin:0 auto">
            <lm-layout style="min-height: 600px;">
                <lm-header>
                    <div class="box1">header</div>
                </lm-header>
                <lm-layout>
                    <lm-sider>
                        <div class="box3"  style="width: 150px;height: 100%;">sider</div>
                    </lm-sider>
                    <lm-content>
                        <div class="box2" style="height: 100%;">content</div>
                    </lm-content>
                </lm-layout>
                <lm-footer>
                    <div class="box1">footer</div>
                </lm-footer>
            </lm-layout>
        </div>
        <br/>
        <div style="width:90%;margin:0 auto">
            <lm-layout style="min-height: 600px;">
                <lm-sider>
                    <div class="box3"  style="width: 150px; height: 100%;">sider</div>
                </lm-sider>
                <lm-layout>
                    <lm-header>
                        <div class="box1">header</div>
                    </lm-header>
                    <lm-content>
                        <div class="box2">content</div>
                    </lm-content>
                    <lm-footer>
                        <div class="box1">footer</div>
                    </lm-footer>
                </lm-layout>
            </lm-layout>
        </div>
        <br/>
        <h1>Toast 组件</h1>
        <hr>
        <br/>
        <lm-button @click="showToast('top')">弹出提示</lm-button>
        <lm-button @click="showToast('bottom')">下边弹出提示</lm-button>
        <lm-button @click="showToast('middle')">中间弹出提示</lm-button>
        <lm-button @click="showToast('top','<b>hello world</b>')">html提示</lm-button>
        <h1>popover 组件</h1>
        <hr>
        <br/>
        <div style="border: 1px solid green; padding:5px; overflow: hidden;" @click="yyy">
            <lm-popover>
                <template slot="content">Hello world</template>
                <lm-button>弹出提示</lm-button>
            </lm-popover>
            <lm-popover position="bottom">
                <template slot="content">Hello world</template>
                <lm-button>下面弹出提示</lm-button>
            </lm-popover>
            <lm-popover position="left">
                <template slot="content">Hello world</template>
                <lm-button>左边弹出提示</lm-button>
            </lm-popover>
            <lm-popover position="right">
                <template slot="content">Hello world</template>
                <lm-button>右边弹出提示</lm-button>
            </lm-popover>
        </div>
        <div style="border: 1px solid green; padding:5px; overflow: hidden;" @click="yyy">
            <lm-popover trigger="hover">
                <template slot="content">Hello world</template>
                <lm-button>hover弹出提示</lm-button>
            </lm-popover>
            <lm-popover position="bottom" trigger="hover">
                <template slot="content">Hello world</template>
                <lm-button>hover下面弹出提示</lm-button>
            </lm-popover>
            <lm-popover position="left" trigger="hover">
                <template slot="content">Hello world</template>
                <lm-button>hover左边弹出提示</lm-button>
            </lm-popover>
            <lm-popover position="right" trigger="hover">
                <template slot="content">Hello world</template>
                <lm-button>hover右边弹出提示</lm-button>
            </lm-popover>
        </div>
        <lm-popover position="right">
            <template slot="content" slot-scope="{ close }">
                Hello world
                <lm-button @click="close">关闭</lm-button>
            </template>
            <lm-button>点击内容关闭</lm-button>
        </lm-popover>
        <h1>Tabs 组件</h1>
        <hr>
        <lm-tabs v-model="tabsSelect">
            <lm-tabs-head>
                <lm-tabs-item name="one">
                    <lm-icon name="reload"></lm-icon>
                    第一页
                </lm-tabs-item>
                <lm-tabs-item name="tow" disabled>第二页</lm-tabs-item>
                <lm-tabs-item name="therr" >第三页</lm-tabs-item>
                <template slot="actions"><lm-button size="mini">设置</lm-button></template>
            </lm-tabs-head>
            <lm-tabs-body>
                <lm-tabs-pane name="one">
                    这是第一页的内容
                </lm-tabs-pane>
                <lm-tabs-pane name="tow">
                    这是第二页的内容
                </lm-tabs-pane>
                <lm-tabs-pane name="therr">
                    这是第三页的内容
                </lm-tabs-pane>
            </lm-tabs-body>
        </lm-tabs>
        <br/>
        <h1>Cllapse 组件</h1>
        <hr>
            <div style="width: 80%; margin: 0 auto;">
                <lm-collapse v-model="collapseSelect" single>
                    <lm-collapse-item title="标题1" name="1">内容1</lm-collapse-item>
                    <lm-collapse-item title="标题2" name="2">内容2</lm-collapse-item>
                    <lm-collapse-item title="标题3" name="3">内容3</lm-collapse-item>
                </lm-collapse>
            </div>
        <br/>
        <h1>Nav 组件</h1>
        <hr>
        <br/>
        <div style="width: 350px;">
            <lm-nav :options="option" @change="handler">
                <template v-slot="{ item }">
                    <span style="vertical-align: middle;">{{item.label}}</span>
                </template>
            </lm-nav>
        </div>
    </div>
</body>
<script src="./src/app.js"></script>
</html>